<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>通知管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .operation-container {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <div class="content-container">
        <div class="layui-card-header">通知管理</div>
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <div class="operation-container">
                <form class="layui-form" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" placeholder="请输入标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">级别</label>
                            <div class="layui-input-inline">
                                <select name="level">
                                    <option value="">全部</option>
                                    <option value="1">管理员</option>
                                    <option value="2">求职者</option>
                                    <option value="3">招聘者</option>
                                    <option value="4">公共</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select name="type">
                                    <option value="">全部</option>
                                    <option value="1">重要通知</option>
                                    <option value="2">普通通知</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 操作按钮区域 -->
            <div class="operation-container">
                <button class="layui-btn" id="addBtn">
                    <i class="layui-icon layui-icon-add-1"></i>添加
                </button>
                <button class="layui-btn layui-btn-danger" id="batchDeleteBtn">
                    <i class="layui-icon layui-icon-delete"></i>批量删除
                </button>
            </div>

            <!-- 表格区域 -->
            <table id="notificationTable" lay-filter="notificationTable"></table>
        </div>
    </div>
</div>

<!-- 添加/编辑表单 -->
<div id="formDialog" style="display: none; padding: 20px;">
    <form class="layui-form" id="notificationForm" lay-filter="notificationForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea name="content" required lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">级别</label>
            <div class="layui-input-block">
                <select name="level" required lay-verify="required">
                    <option value="">请选择级别</option>
                    <option value="1">管理员</option>
                    <option value="2">求职者</option>
                    <option value="3">招聘者</option>
                    <option value="4">公共</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="type" required lay-verify="required">
                    <option value="">请选择类型</option>
                    <option value="1">重要通知</option>
                    <option value="2">普通通知</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 内容详情弹窗 -->
<div id="contentDialog" style="display: none; padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" id="detailTitle" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea id="detailContent" readonly class="layui-textarea layui-disabled" style="min-height: 200px;"></textarea>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableOperation">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script src="/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 初始化表格
        var tableIns = table.render({
            elem: '#notificationTable',
            url: '/api/notification/getAll',
            method: 'post',
            page: true,
            response: {
                statusName: 'code',
                statusCode: 200,
                countName: 'count',
                dataName: 'data'
            },
            cols: [[
                {type: 'checkbox', fixed: 'left', width: 50},
                {field: 'id', title: 'ID', width: 100, sort: true},
                {field: 'title', title: '标题', width: 250},
                {field: 'content', title: '内容', hide: true},
                {field: 'level', title: '级别', width: 180, templet: function(d){
                        return d.level === 1 ? '管理员' : d.level === 2 ? '求职者' : d.level === 3 ? '招聘者' : '公共';}
                },
                {
                    field: 'admin',
                    title: '创建人',
                    width: 240,
                    templet: function(d){
                        return d.admin ? d.admin.info.phone : '管理员';
                    }
                },
                {field: 'type', title: '类型', width: 180, templet: function(d){
                        return d.type === 1 ? '重要通知' : '普通通知';
                    }},
                {field: 'createTime', title: '创建时间', width: 200, sort: true, templet: function(d){
                        return new Date(d.createTime).toLocaleString();
                    }},
                {fixed: 'right', title: '操作', width: 280, align: 'center', toolbar: '#tableOperation'}
            ]],
            initSort: {
                field: 'createTime',
                type: 'asc'
            }
        });

        // 搜索按钮点击事件
        form.on('submit(searchBtn)', function (data) {
            // 获取表单数据
            var searchParams = {
                title: data.field.title,
                level: data.field.level || null,
                type: data.field.type || null
            };

            // 重载表格数据
            tableIns.reload({
                where: searchParams,
                page: {curr: 1}
            });
            return false;
        });

        // 添加按钮点击事件
        $('#addBtn').click(function () {
            form.val('notificationForm', {
                "id": "",
                "title": "",
                "content": "",
                "level": "",
                "type": ""
            });
            layer.open({
                title: '添加通知',
                type: 1,
                area: ['600px', '500px'],
                content: $('#formDialog')
            });
        });

        // 批量删除按钮点击事件
        $('#batchDeleteBtn').click(function () {
            var checkStatus = table.checkStatus('notificationTable');
            var data = checkStatus.data;
            if (data.length === 0) {
                layer.msg('请选择要删除的通知');
                return;
            }

            layer.confirm('确定要删除选中的通知吗？', function (index) {
                var ids = data.map(function (item) {
                    return item.id;
                });

                $.ajax({
                    url: '/api/notification/batch',
                    type: 'delete',
                    contentType: 'application/json',
                    data: JSON.stringify(ids),
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg('删除成功');
                            tableIns.reload();
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                });
                layer.close(index);
            });
        });

        // 表格工具栏事件
        table.on('tool(notificationTable)', function (obj) {
            var data = obj.data;

            if (obj.event === 'detail') {
                // 显示通知详情
                $('#detailTitle').val(data.title);
                $('#detailContent').val(data.content);
                layer.open({
                    title: '通知详情',
                    type: 1,
                    area: ['600px', '500px'],
                    content: $('#contentDialog')
                });
            } else if (obj.event === 'edit') {
                form.val('notificationForm', {
                    "id": data.id,
                    "title": data.title,
                    "content": data.content,
                    "level": data.level,
                    "type": data.type
                });
                layer.open({
                    title: '编辑通知',
                    type: 1,
                    area: ['600px', '500px'],
                    content: $('#formDialog')
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除该通知吗？', function (index) {
                    $.ajax({
                        url: '/api/notification/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg('删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        },
                        error: function () {
                            layer.msg('删除失败');
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 表单提交事件
        form.on('submit(formSubmit)', function (data) {
            var url = data.field.id ? '/api/notification/' + data.field.id : '/api/notification';
            var method = data.field.id ? 'put' : 'post';

            $.ajax({
                url: url,
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg('操作成功');
                        layer.closeAll();
                        tableIns.reload();
                    } else {
                        layer.msg(res.msg || '操作失败');
                    }
                },
                error: function () {
                    layer.msg('操作失败');
                }
            });
            return false;
        });
    });
</script>
</body>
</html>